<template>
  <div>
    <el-button type="warning" plain @click="table = true">事故率</el-button>
    <el-drawer v-model="table" title="事故发生概率榜" direction="ltr" size="35%">
      <div style="display:flex; margin-bottom: 10px;">
        <el-input v-model="searchAddr" placeholder="请输入地点查询" />
        <el-button type="primary" style="margin-left: 10px" circle @click="searchPredict">
          <el-icon><Search /></el-icon>
        </el-button>
      </div>
      <el-table :data="predictData">
        <el-table-column property="time" label="时间" width="130" />
        <el-table-column property="addr" label="地点" width="130" />
        <el-table-column property="predict" label="事故率" width="130" />
        <el-table-column label="调度">
          <template v-slot="scope">
            <el-button type="text" @click="details(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="predictData.length === 0" style="text-align: center; margin-top: 100px;">无匹配地点</div>
    </el-drawer>

    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="调度详情" width="50%" :before-close="handleClose">
      <div>
        <el-table :data="currentDetail">
          <el-table-column property="uid" label="警号" width="120" />
          <el-table-column property="place" label="地点" width="160" />
          <el-table-column property="finished" label="是否完成" width="120" />
          <el-table-column property="starttime" label="开始时间" width="150" />
          <el-table-column property="endtime" label="结束时间" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Drawer } from 'element-ui'
import { Search } from 'element-ui'

export default {
  components: {
    ElDrawer: Drawer,
    Search
  },
  data() {
    return {
      table: false,
      searchAddr: '',
      predictData: [],
      dialogVisible: false,
      currentDetail: [],
      currentAddr: ''
    }
  },
  mounted() {
    this.fetchPredicts()
  },
  methods: {
    fetchPredicts() {
      this.axios.get('https://apifoxmock.com/m1/4767131-4420546-default/predict/get')
        .then(response => {
          if (Array.isArray(response.data.predictData)) {
            this.predictData = response.data.predictData
            console.log(this.predictData)
          } else {
            console.error('Error: Expected an array but got:', response.data.predictData)
          }
        })
        .catch(error => {
          console.error('Error fetching predictData:', error)
        })
    },
    searchPredict() {
      this.axios.get('https://apifoxmock.com/m1/4767131-4420546-default/predict/get', { params: { addr: this.searchAddr }})
        .then(response => {
          if (Array.isArray(response.data.predictData)) {
            this.predictData = response.data.predictData
            console.log('Result data is an array:', response.data.predictData)
          } else {
            this.predictData = []
            console.error('Error: Expected an array but got:', response.data.predictData)
          }
        })
        .catch(error => {
          this.predictData = []
          console.error('Error searching predictData:', error)
        })
    },
    details(row) {
      this.currentAddr = row.addr
      console.log('detailed place:', this.currentAddr)
      this.axios.get('https://apifoxmock.com/m1/4767131-4420546-default/task/get_predict_detail/', { params: { place: this.currentAddr }})
        .then(response => {
          if (Array.isArray(response.data.currentDetail)) {
            this.currentDetail = response.data.currentDetail
            console.log('Result data is an array:', response.data.currentDetail)
          } else {
            this.currentDetail = []
            console.error('Error: Expected an array but got:', response.data.currentDetail)
          }
        })
        .catch(error => {
          this.currentDetail = []
          console.error('Error searching currentAddr:', error)
        })
      this.dialogVisible = true
    },
    handleClose(done) {
      this.dialogVisible = false
      done()
    }
  }
}
</script>

<style scoped>
/* 在这里可以添加组件的样式 */
</style>
